<template>
  <div>

  <!-- 直接引入三级联动组件，不需要导入注册，因为 TypeNav 已经注册为全局组件 -->
  <TypeNav></TypeNav>

  <!-- 列表内容组件 -->
  <ListContainer></ListContainer>

  <!-- 今日推荐内容组件 -->
  <Recommend></Recommend>

  <!-- 商品排行组件 -->
  <Rank></Rank>

  <!-- 楼层内容组件 -->
  <!-- floorList没有数据，floorList下的floor从有数据 floorList.floor 循环渲染家用电器数据 不需要再复用 floor 组件 -->
  <!-- 自定义事件 :list="floor" 通过 props 实现组件父子通讯 -->
  <!-- floor 这个组件：自己内部是没有发请求的，数据是父组件给的 -->
  <Floor v-for="(floor,index) in floorList.floor" :key="floor.id" :list="floor"></Floor>

  <!--复用 楼层内容组件 -->

  <!-- 商品图标组件 -->
  <Brand></Brand>
  </div>
</template>

<script>
// 导入列表内容组件
import ListContainer from '@/pages/Home/listContainer/ListContainer'
// 导入今日推荐组件
import Recommend from '@/pages/Home/Recommend/Recommend'
// 导入商品排行组件
import Rank from '@/pages/Home/Rank/Rank.vue'
// 导入楼层组件
import Floor from '@/pages/Home/Floor/Floor.vue'
// 导入商标组件
import Brand from '@/pages/Home/Brand/Brand.vue'
// 导入 vuex
import { mapState } from 'vuex'
export default {
  // Home 首页内容
  name: 'Home',
  components: {
    ListContainer,
    Recommend,
    Rank,
    Floor,
    Brand
  },
  mounted () {
    // 派发 actions 获取家用电器的数据
    this.$store.dispatch('getFloorList')
  },
  computed: {
    ...mapState({
      floorList: (state) => state.home.floorList
    })
  }
}
</script>

<style lang="less" scoped>

</style>
